<template>
  <div>
    <el-card>
      <template #header>
        <!-- <el-button
          icon="ele-Plus"
          type="primary"
          @click="changeDialogVisibleHandler"
          v-premission="'btn.Trademark.add'"
          >添加</el-button
        > -->
        <my-button
          premission="btn.Trademark.add"
          icon="ele-Plus"
          type="primary"
          @click="changeDialogVisibleHandler"
          >添加</my-button
        >
      </template>

      <el-table :data="trademarks">
        <el-table-column
          label="序号"
          type="index"
          width="100px"
        ></el-table-column>
        <el-table-column label="品牌名称" prop="tmName"></el-table-column>
        <el-table-column label="品牌LOGO">
          <template #="{ row }">
            <img :src="row.logoUrl" width="100" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <!-- <el-button
              v-premission="'btn.Trademark.update'"
              type="warning"
              icon="ele-Edit"
              @click="showEditDialogHandler(row)"
              >修改</el-button
            > -->
            <my-premission premission="btn.Trademark.update">
              <el-button
                type="warning"
                icon="ele-Edit"
                @click="showEditDialogHandler(row)"
                >修改</el-button
              >
            </my-premission>
            <el-button
              v-premission="'btn.Trademark.remove'"
              type="danger"
              icon="ele-Delete"
              @click="removeHandler(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px"
        :page-count="pages"
        :current-page="page"
        @current-change="currentChangeHandler"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        @size-change="sizeChangeHandler"
        layout="prev,pager,next,jumper,->,sizes,total"
      ></el-pagination>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      :title="formData.id ? '编辑品牌 - ' + formData.tmName : '添加品牌'"
    >
      <el-form :model="formData" :rules="formDataRules" ref="formRef">
        <el-form-item label="品牌名称" prop="tmName">
          <el-input
            placeholder="请输入品牌的名称"
            v-model="formData.tmName"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoUrl">
          <el-upload
            class="uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="onSuccessHandler"
            :before-upload="beforeUploadHandler"
          >
            <img
              v-if="formData.logoUrl"
              :src="formData.logoUrl"
              class="thumb"
            />
            <el-icon v-else class="uploader-icon"
              ><ele-Plus></ele-Plus
            ></el-icon>
            <template #tip>
              <p>
                上传的图片必须是
                {{ settings.uploadFileExt.join("、") }} 等图片格式，且不能大于
                {{ settings.uploadFileLimitSize }} kb
              </p>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="default" @click="cancelDialogHandler">取消</el-button>
        <el-button type="primary" @click="postAddOrUpdateTrademarkHandler"
          >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ProductTrademark",
});
</script>
<script lang="ts" setup>
import { ref, computed, reactive, nextTick } from "vue";
import * as apis from "@/api/trademark";
import settings from "@/settings";
import { ElMessage, ElMessageBox } from "element-plus";

import type { IBaseTrademark } from "@/api/trademark";
import type {
  UploadUserFile,
  UploadFile,
  UploadFiles,
  FormRules,
  UploadRawFile,
} from "element-plus";

// 存储获取到 trademarks 列表
const trademarks = ref<IBaseTrademark[]>([]);
// 总页数
const pages = ref(0);
// 当前显示的页码数
const page = ref(1);
// 每页显示的条数
const pageSize = ref(5);
// 总的数据条数
const total = ref(0);
// 控制对话框的显示与隐藏的变量
const dialogVisible = ref(false);
// 上传文件的api 地址
const uploadUrl = `${import.meta.env.VITE_API_URL}/product/upload`;
// 存储已经上传的图片列表
const fileList = ref<UploadUserFile[]>([]);
// 存储要显示和最后上传的图片信息
// const fileInfo = ref<string>("");
// 表单数据校验（提交给后端的数据）
// {id?: number} & {tmName: string, logoUrl: string}
const formData = ref<
  Partial<Pick<IBaseTrademark, "id">> & Omit<IBaseTrademark, "id">
>({
  tmName: "",
  logoUrl: "",
});
// 表单校验规则
const formDataRules: FormRules = {
  tmName: { required: true, min: 1, message: "品牌名称不能为空" },
  logoUrl: {
    required: true,
    validator(rule: any, value: string, callback) {
      if (value.trim().startsWith("http")) {
        callback();
      } else {
        callback(new Error("上传图片地址不正确"));
      }
    },
  },
};
// 提交表单实例对象
const formRef = ref();

async function getBaseTrademarkByPage() {
  try {
    const res = await apis.requestBaseTrademarkByPage(
      page.value,
      pageSize.value
    );
    trademarks.value = res.records;
    pages.value = res.pages;
    total.value = res.total;
  } catch (e) {}
}

getBaseTrademarkByPage();

/**
 * 当 current-page 值发生改变的时候触发
 */
function currentChangeHandler(v: number) {
  page.value = v;
  // 发送请求
  getBaseTrademarkByPage();
}

/**
 * 当 sizeChangeHandler 值发生改变的时候触发
 */
function sizeChangeHandler(v: number) {
  pageSize.value = v;
  // 发送请求
  getBaseTrademarkByPage();
}

/**
 * 点击添加按钮显示对话框
 */
async function changeDialogVisibleHandler() {
  dialogVisible.value = true;

  // 给formData进行赋值
  // 问题：如果这个过程导致了 formData 的值被修改，触发了 表单校验
  formData.value = {
    tmName: "",
    logoUrl: "",
  };

  // 同时要重置表单的验证状态
  // 清空校验状态是一个异步的
  // setTimeout 宏任务
  setTimeout(() => {
    formRef.value.clearValidate();
  });

  // 这个 nextTick 微任务
  // nextTick(() => {
  // formRef.value.clearValidate();
  // console.log(formRef.value);
  // formRef.value.resetFields();
  // });
}

/**
 * 执行上传成功后的onsuccess函数
 */
function onSuccessHandler(
  /* 上传成功后后端返回的数据 */
  response: { data: string },
  /* 当前上传的图片数据 */
  uploadFile: UploadFile,
  /* 所有已经上传的图片数据 */
  uploadFiles: UploadFiles
) {
  // console.log(response, uploadFile, uploadFiles);
  // fileInfo.value = response.data;
  formData.value.logoUrl = response.data;
}

/**
 * 选择文件之后，上传之前执行
 * 第一个参数：当前选择的要上传的本地文件信息，它是一个 UploadRawFile 类型
 */
function beforeUploadHandler(rawFile: UploadRawFile) {
  // console.log("beforeUploadHandler", rawFile);
  // 图片的类型必须是 png、gif、jpeg、jpg 等图片类型
  if (!settings.uploadFileExt.includes(rawFile.type.slice(6))) {
    ElMessage.error("不允许上传该类型的文件");
    return false;
  }
  // 上传的文件大小不能超过指定大小
  // 我们可以通过 rawFile.size 来获取大小（单位：字节 byte）1kb = 1024byte
  if (rawFile.size / 1024 > settings.uploadFileLimitSize) {
    ElMessage.error("上传文件超过了指定的大小");
    return false;
  }
}

/**
 * 编辑
 */
function showEditDialogHandler(row: IBaseTrademark) {
  dialogVisible.value = true;
  // 把 row 的数据赋值给 formData
  // 不要直接赋值，因为 row 是一个对象，这样做就会赋址，我们修改表单中的 formData 就会影响列表中 row
  // formData.value = row;
  formData.value = { ...row };
}

/**
 * 点击对话框的取消按钮
 */
function cancelDialogHandler() {
  // 隐藏对话框
  dialogVisible.value = false;
}
/**
 * 点击对话框的确定按钮
 * 我们复用了对话框和数据结构，那么点击确定按钮的时候就要去区分当前调用的接口是哪一个
 * 我们可以根据当前 postData 中是否存在 id 这个属性来判断当前是调用 保存新的品牌接口 还是 调用更新接口
 */
async function postAddOrUpdateTrademarkHandler() {
  const operation = formData.value.id ? "编辑" : "添加";
  try {
    await formRef.value.validate();
    // 验证失败，直接 catch

    if (formData.value.id) {
      // 编辑
      await apis.requestUpdateBaseTrademark(formData.value as IBaseTrademark);
    } else {
      // 新增
      await apis.requestSaveBaseTrademark(formData.value);

      // 处理一下当前页面 page
      // 用当前总的数据条数 % pageSize，如果值为 0 表示最后一页数据已经满了，否则还有剩余空间
      if (total.value % pageSize.value === 0) {
        // 没有剩余空间
        page.value = pages.value + 1;
      } else {
        // 有剩余空间
        page.value = pages.value;
      }
    }

    ElMessage.success(`${operation}成功`);

    // 隐藏对话框
    dialogVisible.value = false;
    // 刷新列表
    getBaseTrademarkByPage();
  } catch (e) {
    ElMessage.error(`${operation}失败`);
  }
}

/**
 * 删除指定 trademark
 */
async function removeHandler(id: number) {
  try {
    // ElMessageBox({
    //   type: "error",
    //   boxType: "confirm",
    //   title: "提示",
    //   message: "你确定要删除吗？",
    // });

    await ElMessageBox.confirm("你确定要删除吗？", "提示", {
      type: "warning",
    });

    await apis.requestRemoveBaseTrademark(id);
    ElMessage.success("删除成功");
    // 当前页面有多少条数据，如果只有一条，那么就表示删除操作成功以后就会使得当前页面数据为空，我们就应该进入上一页
    if (trademarks.value.length == 1) {
      page.value = page.value - 1;
    }
    // 刷新页面
    getBaseTrademarkByPage();
  } catch (e) {
    if (e !== "cancel") {
      ElMessage.error("删除失败");
    }
  }
}
</script>

<style scoped>
.uploader .thumb {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
